<template>
  <yt-page title="执法检查任务" :leftData="leftData">
    <yt-tabs v-model="tabs">
      <yt-tab-panel text="现场检查方案">
        <yt-cell label="指令编号" value="（示范区）安监检查（2018）092017号"></yt-cell>
        <yt-cell label="被检查单位" value="连云港瑞康卫生有限公司"></yt-cell>
        <yt-cell label="检查时间">
          <yt-cell-time v-model="checkWay.time"></yt-cell-time>
        </yt-cell>
        <yt-cell label="检查人员">
          <yt-cell-select v-model="checkWay.checkUsers" :max="5" :list="checkUsers" label="name" val="id"></yt-cell-select>
        </yt-cell>
        <yt-cell label="检查方式">
          <yt-cell-select v-model="checkWay.checkWays" :max="3" :list="checkWays" label="name" val="id"></yt-cell-select>
        </yt-cell>
        <yt-cell label="检查内容" border="none" isLink @click="goPage('/todo/addContent')">
          <yt-btn slot="default">添加</yt-btn>
        </yt-cell>
        <yt-textarea type="column" v-model="checkWay.content"></yt-textarea>
        <yt-btn theme="blue" class="m-t">保存</yt-btn>
      </yt-tab-panel>
      <yt-tab-panel text="现场检查记录">
        <yt-cell label="指令编号">
          <yt-input v-model="checkRecord.number"></yt-input>
        </yt-cell>
        <yt-cell label="检查场所">
          <div slot="default" class="flex">
            <yt-input v-model="checkRecord.place"></yt-input>
            <i class="iconfont icon-voice"></i>
          </div>
        </yt-cell>
        <yt-cell label="开始时间">
          <yt-cell-time v-model="checkRecord.startTime"></yt-cell-time>
        </yt-cell>
        <yt-cell label="结束时间">
          <yt-cell-time v-model="checkRecord.endTime"></yt-cell-time>
        </yt-cell>
        <yt-cell label="检查人员">
          <yt-cell-select v-model="checkWay.checkUsers" :max="5" :list="checkUsers" label="name" val="id"></yt-cell-select>
        </yt-cell>
        <yt-cell border="none" label="检查记录" @click="goPage('/todo/addRecord')">
          <i slot="default" class="iconfont icon-add-outline"></i>
        </yt-cell>
        <yt-btn theme="blue" class="m-t">保存</yt-btn>
      </yt-tab-panel>
      <yt-tab-panel text="责令限期整改">
        <yt-cell label="指令编号">
          <yt-input v-model="reform.number"></yt-input>
        </yt-cell>
        <yt-cell label="整改期限">
          <yt-cell-time v-model="reform.time"></yt-cell-time>
        </yt-cell>
        <yt-cell label="审批人">
          <yt-cell-select v-model="reform.approvers" :max="5" :list="approvers" label="name" val="id"></yt-cell-select>
        </yt-cell>
        <yt-textarea type="column" v-model="reform.remark">
          <div slot="default">
            <span>补充说明</span>
            <i class="iconfont icon-voice f-r"></i>
          </div>
        </yt-textarea>
        <yt-cell label="检查记录" @click="goPage('/todo/addRecord')">
          <i slot="default" class="iconfont icon-add-outline"></i>
        </yt-cell>
        <yt-textarea type="column" v-model="reform.remark">
          <div slot="default" class="flex">
            <span>法律法规</span>
            <yt-btn size="mini">法律法规匹配</yt-btn>
          </div>
        </yt-textarea>
      </yt-tab-panel>
    </yt-tabs>
  </yt-page>
</template>

<script>
export default {
  data() {
    return {
      leftData: [
        {
          font: 'iconfont icon-left',
          click: () => {
            this.$router.$back()
          }
        }
      ],
      tabs: 0,
      checkWay: {
        time: '',
        checkWays: [],
        checkUsers: [],
        content: ''
      }, // 现场检查方案
      checkRecord: {
        number: '',
        place: '',
        startTime: '',
        endTime: ''
      }, // 现场检查记录
      reform: {
        number: '',
        time: '',
        approvers: [],
        remark: '',
        content: ''
      }, // 责令限期整改
      checkUsers: [], // 检查人员
      checkWays: [], // 检查方式
      approvers: [] // 审批人
    }
  },
  activated() {
    this.checkUsers = [
      { id: 1, name: '康熙' },
      { id: 2, name: '雍正' },
      { id: 3, name: '乾隆' },
      { id: 4, name: '宣统' }
    ]

    this.approvers = [{ id: 1, name: '康熙' }, { id: 4, name: '宣统' }]

    this.checkWays = [
      { id: 1, name: '看现场' },
      { id: 2, name: '听汇报' },
      { id: 3, name: '查台账' }
    ]
  },
  methods: {
    goPage(path) {
      this.$router.$push(path)
    }
  }
}
</script>

<style scoped lang="stylus">
.m-t
  margin-top 30px

.f-r
  float right

.flex
  width 100%
  display flex
  align-items center
  justify-content space-between

  .yt-input input
    text-align right

.iconfont
  font-size 25px
  color #46baff

>>>.yt-tabs-item
  padding 0

>>>.yt-cell
  .yt-button
    background none
    padding 0
    border none
    color #46baff
    font-size 15px
    margin 0

>>>.yt-textarea-title
  .yt-button
    background none
    padding 0
    border none
    color #46baff
    font-size 15px
    margin 0
</style>
